<template>
	<view style="background: #fff;">
		<view class="member_header" :style="{height: navBarHeight+'px'}">
			<image class="_img" :style="{height: navBarHeight+'px'}" mode="aspectFill" src="https://img2.baidu.com/it/u=2007669978,4235660448&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=667"></image>
			<view class="_mask"></view>
		</view>
		
		<u-navbar
			title=" "
			:bgColor="bgColor"
			:fixed="true"
		>
			<view slot="left" class="nav_left">
				 <u-icon
					name="arrow-left"
					size="19"
					@click="navBack"
					color="#ffffff"
				/>
				
				<view style="margin: 0 25rpx 0 30rpx;">
					<u-icon
						name="setting"
						size="19"
						@click="routeSetting"
						color="#ffffff"
					/>
				</view>
				
				<u-button open-type="share" iconColor="#ffffff" shape="circle" icon="share-fill" :customStyle="shareStyle"></u-button>
			</view>
		</u-navbar>
		
		<view class="member_content">
			<view class="user_info">
				<image class="_head" src="https://img1.baidu.com/it/u=1097077603,238359071&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" mode="aspectFill"></image>
				<view class="_name">尼古拉斯赵四</view>
				<view class="_intro">
					<text class="_t1">介绍一下自己</text>
					<text class="_t2" @click="introVisChange">展开</text>
				</view>
			</view>
			
			<view class="statistics_info">
				<view class="_item">
					<view class="_label">关注</view>
					<view class="_num">654564</view>
				</view>
				<view class="_item">
					<view class="_label">人气</view>
					<view class="_num">654564</view>
				</view>
				<view class="_item">
					<view class="_label">积分</view>
					<view class="_num">654564</view>
				</view>
			</view>
			
			<!-- 作品列表 -->
			<view class="work_list">
				<view class="_item" @click="routeWorks(item)" v-for="(item,index) in 6" :key="index">
					<image class="_img" mode="aspectFill" src="https://img2.baidu.com/it/u=4134404395,864195599&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666"></image>
					<view class="_bottom">
						<view class="_title">每个组件，包括如下几个部分：以组件名称为标记的开始标签和结束标签、组件内容、组件属性、组件属性值</view>
						<view class="_datas">
							<view class="_popular">
								<i class="iconfont icon-renqi"></i>
								<text>3152</text>
							</view>
							
							<view class="_views">
								<u-icon name="eye" size="19"></u-icon>
								<text>3152</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 浮动上传按钮 -->
		<cover-view class="float_member" @click="routeAddWork">
			<u-icon name="plus" size="30" color="#ffffff"></u-icon>
		</cover-view>
		
		<!-- 选择分类 -->
		<u-popup
			:show="introVisible"
			:round="10" 
			mode="bottom"
			closeOnClickOverlay
			closeable
			@close="introVisChange"
		>
			<view class="intro_title">个人资料</view>
			<view class="intro_item">
				<view class="_label">年龄</view>
				<view class="_value">10岁</view>
			</view>
			<view class="intro_item">
				<view class="_label">性别</view>
				<view class="_value">男</view>
			</view>
			<view class="intro_item">
				<view class="_label">职业</view>
				<view class="_value">大师</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navBarHeight: 0, // 导航栏的高度
				bgColor: 'rgba(255,0,27,0)',
				shareStyle: {
					backgroundColor: "rgba(255,255,255,0)",
					border: 'none'
				},
				introVisible: false,
			}
		},
		onLoad() {
			this.getNavBarHeight();
		},
		onPageScroll(e) {
			let percent = Math.min(e.scrollTop / this.navBarHeight, 1)
			this.bgColor = `rgba(255,0,27,${percent})`;
		},
		methods: {
			
			// 计算滚动条的高度
			async getNavBarHeight() {
				let sysInfo =  await uni.getSystemInfoAsync()
				// 顶部大图的高度
				this.navBarHeight = sysInfo.statusBarHeight + 44 + 80;
			},
			
			// 后退
			navBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			
			// 跳转设置
			routeSetting() {
				uni.navigateTo({
					url: "/pages/member/setting"
				})
			},
			
			// 个人资料展示与隐藏
			introVisChange() {
				this.introVisible = !this.introVisible
			},
			
			// 跳转作品详情
			routeWorks(item) {
				console.log(item);
				uni.navigateTo({
					url: "/pages/member/works"
				})
			},
			
			// 跳转新增作品
			routeAddWork() {
				uni.navigateTo({
					url: "/pages/member/add-works"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.member_header{
		position: relative;
		._img{
			display: block;
			width: 100%;
			position: relative;
		}
		._mask{
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			z-index: 2;
			background-color: rgba(0,0,0,0.6);
		}
	}
	
	.nav_left{
		display: flex;
		align-items: center;
	}
	
	.user_info{
		padding: 100rpx 30rpx 0rpx 30rpx;
		._head{
			width: 130rpx;
			height: 130rpx;
			border-radius: 50%;
			margin-right: 30rpx;
			border: 6rpx solid #fff;
			position: absolute;
			left: 30rpx;
			top: -65rpx;
		}
		._name{
			font-size: 35rpx;
			font-weight: bold;
			margin-bottom: 15rpx;
		}
		._intro{
			._t1{
				color: #666;
			}
			._t2{
				color: $u-primary;
			}
		}
	}
	
	.member_content{
		position: relative;
		z-index: 5;
		background: #fff;
		border-radius: 50rpx 50rpx 0 0;
		transform: translateY(-50rpx);
		padding-bottom: 50rpx;
	}
	
	.statistics_info{
		display: flex;
		._item{
			flex: 1;
			text-align: center;
			padding: 40rpx 0;
			._label{
				color: #666;
				font-size: 34rpx;
			}
			._num{
				font-weight: bold;
				font-size: 34rpx;
			}
		}
	}
	
	.work_list{
		display: flex;
		flex-wrap: wrap;
		._item{
			width: calc(50% - 45rpx);
			box-sizing: border-box;
			margin-left: 30rpx;
			margin-bottom: 30rpx;
			box-shadow: 0 0 30rpx rgba(0,0,0,0.2);
			._img{
				width: 100%;
				height: 260rpx;
				display: block;
				margin-bottom: 15rpx;
			}
			._bottom{
				margin-right: 25rpx;
				display: flex;
				justify-content: space-between;
				flex-direction: column;
				padding: 10rpx 30rpx 30rpx 30rpx;
				._title{
					font-weight: bold;
					font-size: 32rpx;
					height: 100rpx;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
					text-overflow: ellipsis;
					line-height: 50rpx;
					margin-bottom: 10rpx;
				}
				._datas{
					display: flex;
					justify-content: space-between;
					color: #888;
					._popular, ._views{
						display: flex;
						align-items: center;
					}
				}
			}
		}
	}
	
	.intro_title{
		font-weight: bold;
		font-size: 38rpx;
		text-align: center;
		margin-bottom: 15rpx;
		line-height: 100rpx;
	}
	.intro_item{
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 20rpx;
		padding: 0 30rpx;
		._label{
			width: 120rpx;
			color: #777;
		}
		._value{
			flex: 1;
			color: #333;
		}
	}
	
	.float_member{
		position: fixed;
		right: 40rpx;
		bottom: 10vh;
		border-radius: 50%;
		background: $uni-color-primary;
		width: 120rpx;
		height: 120rpx;
		z-index: 10;
		display: flex;
		justify-content: center;
		align-items: center;
		overflow: hidden;
	}
</style>
